<template>
<div class="info">
  <el-col>
    <el-card :model="form" shadow="always" style="background: transparent;">
      <span style="font-size: 20px">个人信息</span>
      <div style="margin-top: 20px" >
        <div class="demo-image__preview">
          <el-image
              style="width: 150px; height: 160px"
              :src="'http://localhost:8080/yyj/files/'+this.user.img">
            <div slot="error" class="image-slot">
              <el-image src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">

              </el-image>
            </div>
          </el-image>
          <button type="primary" style="margin-left: 10px;margin-top: 5px" @click="updateImg()">上传图片</button>
        </div>
      </div>
      <div>
        <el-descriptions :column="1" size=50 border style="margin-top: 20px;background: transparent;">
          <el-descriptions-item label="用户名">{{ form.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ form.sex }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ form.age }}</el-descriptions-item>
          <el-descriptions-item label="电话" >{{ form.phone }}</el-descriptions-item>
          <el-descriptions-item label="学历" >{{ form.degree }}</el-descriptions-item>
          <el-descriptions-item label="经历/成就" >{{ form.experience }}</el-descriptions-item>
        </el-descriptions>

        <el-button type="primary" style="margin-top: 20px; margin-left: 1020px" @click="updateInfo(form)">修改信息
        </el-button>
      </div>
    </el-card>
  </el-col>
  <!--上传照片的对话框  -->
  <div>
    <div>
      <el-dialog title="上传图片" :visible.sync="dialogUpdateImg" width="25%">
        <el-upload action="http://localhost:8080/yyj/files/upload" list-type="picture-card" :show-file-list="true"
                   :on-success="successUpload" :on-remove="handleRemove" :limit="1 ">
          <i class="el-icon-plus"></i>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogUpdateImg = false">取 消</el-button>
          <el-button type="primary" @click="submitImg()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  <!--修改信息  -->
  <div>
    <el-dialog title="修改信息" :visible.sync="dialogUpdateInfo" width="50%">
      <el-form :model="this.newForm" label-width="50px">
        <el-form-item label="姓名">
          <el-input v-model="newForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" width="50%">
          <template>
            <el-radio v-model="newForm.sex" label="男">男</el-radio>
            <el-radio v-model="newForm.sex" label="女">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="newForm.age"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="newForm.degree"></el-input>
        </el-form-item>
        <el-form-item label="经历/成就" width="50%">
          <el-input v-model="newForm.experience"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="dialogUpdateInfo = false">取 消</el-button>
          <el-button type="primary" @click="submitImg()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "CompleteInfoView",
  data() {
    return {
      form: {},
      user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {},
      dialogUpdateImg: false,
      dialogUpdateInfo: false,
      newForm: {},
    }
  },
  created() {
    this.getInfo();
  },
  methods:{
    //获取用户信息
    getInfo() {
      request.get("/employee/getInfo/" + this.user.id).then(res => {
        if (res.code === '0') {
          this.form = res.data
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    updateImg() {
      this.dialogUpdateImg = true;
    },
    updateInfo(newForm) {
      this.newForm = newForm;
      this.dialogUpdateInfo = true;
      this.getInfo();
    },
    successUpload(res) {
      this.newForm = this.form;
      this.newForm.img = res.data;
      this.newForm.role='ROLE_DOCTOR'
    },
    handleRemove() {

    },
    submitImg() {

      request.post("/employee", this.newForm).then(res => {
        if (res.code === '0') {
          this.$message.success("操作成功");
          localStorage.setItem('user', JSON.stringify(this.newForm));
          this.dialogUpdateImg = false;
          this.dialogUpdateInfo = false;
          window.location.reload();
          //刷新解决了不同步的问题
          // 重新获取用户信息以确保最新的图片URL被加载
          this.getInfo();
        } else {
          this.$message.error(res.msg);
        }
      });
    },

}
}
</script>

<style scoped>
.info {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}
</style>